<template>
  <div class="order-detail-deliveryRecord-view">

    <el-table
            header-cell-class-name="table-header"
      border
      :data="tableData"
      @row-click="rowClick"
    >
      <el-table-column header-align="center" align="center" label="发货记录编号" prop="delivery.deliveryNo" />
      <el-table-column header-align="center" align="center" label="发货日期" prop="area">
        <template #default="scope">
          <span v-if="scope.row.delivery">{{ dateFormat('yyyy-mm-dd',scope.row.delivery.deliveryTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="配送物流" prop="delivery.logistics" />
      <el-table-column header-align="center" align="center" label="物流单号" prop="delivery.logisticsNo" />
      <el-table-column header-align="center" align="center" label="操作人" prop="delivery.deliveryUserName" />
      <el-table-column header-align="center" align="center" label="操作时间">
        <template #default="scope">
          <span>{{ dateFormat('yyyy-mm-dd HH:MM',scope.row.delivery.createdAt) }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" label="发货明细">
        <template #default="scope">
          <div v-if="scope.row.deliveryDetail && scope.row.deliveryDetail.length">

            <span>{{ scope.row.deliveryDetail[0].productPopularName }}</span>
            <span v-if="scope.row.deliveryDetail.length > 1">等</span>

          </div>
        </template>
      </el-table-column>

    </el-table>

    <detail-drawer ref="refDrawer" custom-title :size-width="1000">
      <template #title>
        <div style="display: flex;justify-content: space-between">

          <div>
            <span>发货记录-</span>
            <span>{{ selectData.delivery.deliveryNo }}</span>
          </div>

        </div>

      </template>
      <template #contents>

        <delivery-detail-view :datas="selectData" :order="datas" />

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {useRoute} from 'vue-router'
import {defineComponent, defineAsyncComponent, inject, onBeforeMount, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'DeliveryRecordView',
  components: {
    deliveryDetailView :defineAsyncComponent(()=>import('./deliveryDetailView.vue'))
  },
  props: {
    datas: {
      type: Object,
      default: {}
    }
  },
  setup() {
    const route = useRoute()
    const api = inject('api')

    var data = reactive({
      tableData: [],
      filterData: {
        page: 1,
        pageSize: 20,
        orderId: ''
      },
      refDrawer: null,
      selectData: {},
    })

    const getListData = () => {
      api.order.GET_DELIVERY_LIST(data.filterData).then(res => {
        if (!res.code && res.data) {
          data.tableData = res.data.list
        }
      })
    }

    const rowClick = (row) => {
      api.order.ORDER_DELIVERY_DETAIL(row.delivery.id).then(res => {
        if (!res.code) {
          data.selectData = res.data.delivery
          data.refDrawer.open()
        }
      })
    }

    onBeforeMount(() => {
      if (route.query.id) {
        data.filterData.orderId = Number(route.query.id)
        getListData()
      }
    })

    return {
      ...toRefs(data),

      rowClick,
      getListData,
    }
  }
})
</script>

<style scoped>

</style>
